<template>
    <div class="read">
        <div class="card" v-for="(item, index) in newsList" :key="index">
            <img :src="item.pic_url" class="image" />
            <div class="content">
                <h2 class="title">{{ item.name }}</h2>
                <p class="author">{{ item.artist }}</p>
                <span class="paragraph">
                    {{ item.core }}
                </span>
                <van-button
                    @touchstart="read(index)"
                    plain
                    type="info"
                    class="look"
                    size="small"
                    >点击查看</van-button
                >
            </div>
        </div>
        <div class="clear_both"></div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import Scroll from "components/common/scroll.vue";
export default {
    name: "Read",
    components: {
        Scroll,
    },
    data() {
        return {
            probeType: 3,
        };
    },
    methods: {
        read(index) {
            this.$store.commit("newsIndex", index);
        },
    },
    computed: mapState(["newsList"]),
    // updated() {
    //   console.log("updated");
    //   this.$refs.scroll.initScroll();
    // },
};
</script>

<style lang="less" scoped>
.read {
    width: 100vw;
    overflow-y: scroll;
    flex: 1;
    margin-bottom: 1.3rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .card {
        width: 42vw;
        height: auto;
        position: relative;
        overflow: hidden;
        margin: 0.3rem 0 0 0.3rem;
        border: 1px solid #3333;
        border-radius: 0.2rem;
        img {
            border-bottom: 1px solid #14b5ca;
        }
        .content {
            min-height: 1rem;
            .title {
                display: inline-block;
                width: 1.3rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-emphasis: none;
                margin-left: 0.1rem;
            }
            .author {
                margin: 0.1rem;
                font-weight: 300;
                width: 1.4rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            .paragraph {
                display: block;
                width: 95%;
                font-size: 0.2rem;
                line-height: 0.24rem;
                overflow: hidden;
                height: 0.5rem;
                text-indent: 0.4rem;
                margin: 0.1rem;
            }
            .look {
                font-size: 0.2rem;
                width: 1.5rem;
                height: 0.6rem;
                line-height: 0.6rem;
                position: absolute;
                right: 0.2rem;
                bottom: 0.8rem;
                border-radius: 0.4rem;
                box-shadow: 1px 1px 1px #14b5ca;
                .van-button__text {
                    font-size: 0.2rem;
                }
            }
        }
    }
}
</style>
